<template>
  <div class="h100 bg-white">
    <div class="group-page h100" v-if="officeServiceList.type == 1">
      <div>
        <div className="wechart-title">
          {{ officeServiceList.title }}
        </div>
        <div className="wechart-content">
          <pre>{{ officeServiceList.content }}</pre>
        </div>
        <van-image
          v-if="officeServiceList.imageUrl"
          class="wechart-img mb20"
          mode="widthFix"
          :src="officeServiceList.imageUrl"
        />
        <div
          class="group-list"
          v-for="(item,index) of officeServiceList.items"
          :key="index"
        >
          <div class="list-left">
            {{ item.description }}
          </div>
          <div
            class="group-button"
            @click="confirmToGroup(item.imageUrl, item.description)"
          >
            立即进群
          </div>
        </div>
      </div>
    </div>
    <van-image
      v-if="officeServiceList.imageUrl && officeServiceList.type != 1"
      class="full-img"
      mode="widthFix"
      :src="officeServiceList.imageUrl"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useService } from '@/utils/services';
export default {
  components: {},
  setup() {
    const router = useRouter();
    const actions = useService(({ hos }) => ({ hos }));

    // const communityType = ref(1) //1 普通医院  2 第三方社群   第三方社群只显示图片

    const officeServiceList = ref({});

    const confirmToGroup = (imageUrl, description) => {
      router.push(`/community?imageUrl=${imageUrl}&description=${description}`);
    };

    //查询康复社群设置
    const getEducationCommunity = () => {
      actions.hos.getEducationCommunity().then((res) => {
        officeServiceList.value = res;
      });
    };

    getEducationCommunity();

    return {
      officeServiceList,
      confirmToGroup
    };
  }
};
</script>

<style lang="scss" scoped>
.group-page {
  background: #fff;
  min-height: 100vh;
  overflow-y: auto;
  padding: 40px 36px 40px 40px;
}
.wechart-title {
  font-size: 48px;
  margin-bottom: 40px;
  font-weight: 700;
}
.wechart-content {
  padding-bottom: 40px;
  line-height: 56px;
  font-size: 32px;
  padding-bottom: 50px;
  word-break: break-all;
}
.wechart-img {
  width: 100%;
  margin: 0 auto;
}
.group-list {
  margin-top: 20px;
  padding: 30px;
  border-radius: 8px;
  border: 2px solid #eeeeee;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-button {
  width: 188px;
  font-size: 28px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #27cdc5;
  box-shadow: 0px 0px 16px 0px rgba(39, 205, 197, 0.45);
  border-radius: 32px;
  color: #fff;
}
.list-left {
  max-width: 65%;
  font-size: 32px;
  font-weight: 400;
  color: #373d52;
  line-height: 44px;
  color: rgba(55, 61, 82, 1);
}
.full-img {
  width: 100%;
}
</style>